<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">

        <div id="test">
            test
        </div>

    </div>
    <script>
        /*
            节点关系(用的也不多)

                父子
                    父
                        parentNode
                        parentElement
                        都可以使用
                    子
                        childNodes 孩子节点-- 会把 行号和空格当做 文本节点
                        children   孩子元素（用这个）


                        console.log(box.firstChild);//第一个孩子节点
                        console.log(box.firstElementChild);//第一个孩子元素

                        console.log(box.lastChild);//最后一个孩子节点
                        console.log(box.lastElementChild);//最后一个孩子元素   

                兄弟
                    兄弟元素
                        下一个
                        nextElementSibling
                        上一个
                        previousElementSibling
                    兄弟节点
                        上一个
                        previousSibling
                        下一个
                        nextSibling
        
        */
        //父节点    
        var test = document.querySelector("#test");
        test.parentNode//父节点
        test.parentElement//父元素

        console.log(test.parentElement);
        console.log(test.parentNode);

        var box = document.querySelector("#box")

        // 孩子节点-- 会把 行号和空格当做 文本节点
        console.log(box.childNodes);
        // 孩子元素
        console.log(box.children);

        console.log(box.children[0]);//第一个孩子元素--》div-test
        console.log(box.childNodes[0]);//第一个孩子节点--第一个行号空格

        console.log(box.firstChild);//第一个孩子节点
        console.log(box.firstElementChild);//第一个孩子元素

        console.log(box.lastChild);//最后一个孩子节点
        console.log(box.lastElementChild);//最后一个孩子元素



        //兄弟元素
        // 下一个
        console.log(box.nextElementSibling);
        // 前一个 上一个 没有的话结果null
        console.log(box.previousElementSibling);
        // 兄弟节点
        // 下一个
        // 前一个 上一个
        console.log(box.nextSibling);
        console.log(box.previousSibling);

    </script>

</body>

</html>